<template>
<div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i>信息列表-查看详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="content-rows clearfix">
                <div class="d-left">
                    <label>头像：</label>
                </div>
                <div class="d-right">
                    <img class="headImg" :src="data.logo"/>
                </div>
            </div>
            <div class="content-rows clearfix">
                <div class="d-left">
                    <label>昵称：</label>
                </div>
                <div class="d-right">
                    <label>{{data.nick_name}}</label>
                </div>
            </div>
            <div class="content-rows clearfix">
                <div class="d-left">
                    <label>个人介绍：</label>
                </div>
                <div class="d-right">
                    <p class="introduce">{{data.introduction}}</p>
                </div>
            </div>
            <div class="content-rows clearfix">
                <div class="d-left">
                    <label>基本资料：</label>
                </div>
                <div class="d-right">
                    <div class="row">性别：{{countGender}}</div>
                    <div class="row">年龄：{{data.age}}岁</div>
                    <div class="row">身高：{{data.height}}CM</div>
                    <div class="row">学历：{{data.education}}</div>
                    <div class="row">月收入：{{data.income}}</div>
                    <div class="row">居住地：{{data.address}}</div>
                    <div class="row">婚姻情况：{{data.wedding_state}}</div>
                    <div class="row">子女情况：{{data.children_state}}</div>
                    <div class="row">购房情况：{{data.house_state}}</div>
                    <div class="row">购车情况：{{data.car_state}}</div>
                </div>
            </div>
            <div class="content-rows clearfix">
                <div class="d-left">
                    <label>小档案：</label>
                </div>
                <div class="d-right">
                    <div class="row">家乡：{{data.hometown}}</div>
                    <div class="row">民族：{{data.nation}}</div>
                    <div class="row">血型：{{data.blood}}</div>
                    <div class="row">星座：{{data.constellation}}</div>
                    <div class="row">是否喝酒：{{data.drink_state}}</div>
                    <div class="row">是否抽烟：{{data.smoke_state}}</div>
                    <div class="row">婚姻情况：{{data.wedding_state}}</div>
                </div>
            </div>
            <div class="content-rows clearfix">
                <div class="d-left">
                    <label>图片：</label>
                </div>
                <div class="d-right clearfix" >
                    <img   v-for="(item, index) in countImg" class="detailsImgs" :src="item" :key="index" /> 
                </div>
            </div>
            <div style="height:100px;"></div>
        </div>
    </div>
</template>
<script>
export default {
    name:"details",
    data (){
        return{
            data:{}
        }
    },
    created (){
        this.getUserInfo();
    },
    computed:{
        countGender:function (){
            let text ="男";
            if(this.data.gender==2){
                text ="女";
            }
            return  text;
        },
        countImg:function(){
            let array =[];
            if(this.data.img_list){
                array = JSON.parse(this.data.img_list);
            }
            //console.log(array);
            return array;
        }
    },
    methods:{
        getUserInfo(){
            if(this.$route.params.id &&this.$route.params.id!=""){
                this.$axios.get('/manage/seeking-wedding/find', {
                    params: {
                        id: this.$route.params.id
                    }
                })
                .then( response=> {
                    //console.log(response);
                    if(response.data.code==200){
                        this.data = response.data.data;
                    }else{
                        console.log(response);
                    }
                })
                .catch(error=> {
                    console.log(error);
                });
            }        
        }
    }
}
</script>
<style lang="stylus" scoped>
    .content-rows{
        margin-bottom:15px;
        .d-left{
            float :left;
            width :80px;
            text-align:right 
        }
        .d-right{
            float :left ;
            padding-left 20px;
            .headImg{
                width :80px;
                height :80px;
            }
            .introduce{
            
                line-height :20px;
            }
            .row{
                padding 0px 0px 10px 0px
            }
            .detailsImgs{
                width:300px;
                height:400px;
                float :left;
                margin-right :10px;
                margin-bottom :10px;
            }
        }
    }
</style>


